<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <!--<el-row>
        <el-col :span="6">
          选择时间:
          <el-select v-model="params.sectionId" placeholder="请选择" @change="selectCollege">
            <el-option
              v-for="item in section"
              :key="item.id"
              :label="item.section"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          选择周数:
          <el-select v-model="params.weekId" placeholder="请选择">
            <el-option
              v-for="item in week"
              :key="item.id"
              :label="item.time"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          选择学期:
          <el-select v-model="params.teamId" placeholder="请选择">
            <el-option
              v-for="item in team"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索
          </el-button>
        </el-col>
      </el-row>-->
      <div style="margin-top: 10px">
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-zoom-in" @click="addScore">成绩录入
        </el-button>
        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-zoom-in" @click="countScore">成绩分析
        </el-button>
      </div>
    </div>
    <!--表单组件-->
    <e-from ref="form" :is-add="isAdd" @close="load()"/>
    <score ref="score" :is-add="isAdd" @close="load()"/>
    <!--学生信息组件-->
    <student-info ref="studentForm"/>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      size="small"
      style="width: 100%;"
      stripe
      empty-text="暂无数据"
      highlight-current-row
      current-row-key="id"
      @select="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column prop="name" label="课程名称"/>
      <el-table-column prop="nname" label="课程性质" show-overflow-tooltip/>
      <el-table-column prop="ename" label="考核方式" show-overflow-tooltip/>
      <el-table-column prop="tname" label="开课学期" show-overflow-tooltip/>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="apply(scope.row)"
                     :disabled="(scope.row.end == 1||scope.row.end == 2) ? true : false"
                     :loading="scope.row.end == 1 ? true : false">
            {{endTest(scope.row.end)}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-row>
      <el-col :offset="10">
        <el-pagination
          :total="total"
          :current-page="params.offset"
          style="margin-top: 8px;"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import service from '../../../utils/request'
  import eFrom from './form'
  import {del, listajaxSection, listajaxTeam, listajaxWeek} from '@/api/teacher/course/course'
  import {updateCourseEnd} from '@/api/teacher/score/score'
  import studentInfo from './studentInfo'
  import score from './score'

  export default {
    components: {
      score,
      eFrom,
      studentInfo
    },
    data() {
      return {
        loading: true,
        total: 0,
        show: false,
        isAdd: false,
        team: [],
        week: [],
        section: [],
        courseId: null,
        end: null,
        point: null,
        val: null,
        params: {
          offset: 1,
          limit: 10,
          keyword: null,
          teamId: null,
          weekId: null,
          sectionId: null,
          status: null
        },
        data: null
      }
    },
    created() {
      listajaxSection().then(res => {
        this.section = res.records
      })
      listajaxTeam().then(res => {
        this.team = res.records
      })
      listajaxWeek().then(res => {
        this.week = res.records
      })
      this.load()
    },
    methods: {
      load() {
        service.get('/api/course/findCourseByteacherId', {params: this.params}).then(res => {
          this.data = res.records
          this.loading = false
          this.currentPage = res.current
          this.total = res.realTotal
        }).catch(error => {
          this.loading = false

        })
      },
      sizeChange(val) {
        this.params.limit = val
        this.load()
      },
      pageChange(val) {
        this.params.offset = val
        this.load()
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          classname: data.classname,
          collegeId: data.collegeId,
          specialtyId: data.specialtyId,
          gradeId: data.gradeId
        }
        _this.dialog = true
      },
      toQuery() {
        this.load()
      },
      StudentInfo() {
        this.$refs.studentForm.dialog = true
      },
      handleSelectionChange(val, row) {
        if (val.length == 0) {
          this.courseId = null
          this.end = null
          this.val = null
          this.point = null
        } else if (val.length > 1) {
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(row)
          val.splice(0, val.length - 1)
          this.courseId = val[0].id
          this.end = val[0].end
          this.point = val[0].point
          this.val = val[0]
        } else {
          this.end = val[0].end
          this.val = val[0]
          this.point = val[0].point
          this.courseId = val[0].id
        }
      },
      apply(val) {
        console.log(val)
        if (val.end == 0) {
          val['endStatus'] = 'apply'
        } else if (val.end == 3) {
          val['endStatus'] = 'apply'
        }
        updateCourseEnd(val).then(res => {
          if (res.status == '1') {
            this.$message({
              type: 'success',
              message: '申请成功'
            })
            this.load()
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '申请失败'
          })
        })
      },
      endTest(val) {
        switch (val) {
          case 0:
            return '申请结课'
            break
          case 1:
            return '申请中'
            break
          case 2:
            return '已结课'
            break
          case 3:
            return '已拒绝'
            break
        }
      },
      countScore(val) {
        if (this.end != 2) {
          this.$message({
            type: 'error',
            message: '该课程还未结课'
          })
        } else if (this.courseId == null) {
          this.$message({
            type: 'error',
            message: '请先选择一门课程'
          })
        } else {
          this.$refs.score.dialog = true
          this.$refs.score.params.cid = this.val.id
          this.$refs.score.load()
        }
      },
      addScore(val) {
        if (this.end != 2) {
          this.$message({
            type: 'error',
            message: '该课程还未结课'
          })
        } else if (this.courseId == null) {
          this.$message({
            type: 'error',
            message: '请先选择一门课程'
          })
        } else {
          this.$refs.studentForm.dialog = true
          this.$refs.studentForm.params.id = this.courseId
          this.$refs.studentForm.params.cid = this.val.id
          this.$refs.studentForm.load()
        }
      }
    }
  }
</script>

<style scoped>
  .status {
    color: green;
  }
</style>
